<template>
  <div>
    <div class="pageBg">
      <div class="pageTitle">搜索条件</div>
      <QueryInlineForm :formConfiguration="formdata" ref="queryInlineForm" />
    </div>
    <div class="pageBg">
      <div class="mb-24 flex-c jc-sb">
        <div class="pageTitle">店铺列表</div>
        <t-space :size="4">
          <t-button theme="success" @click="changeAccount('add')">新增账号</t-button>
          <t-button theme="default" variant="outline" @click="onOperationRecord()">操作记录</t-button>
        </t-space>
      </div>
      <t-table :data="tabelData" :loading="isLoading" @page-change="onPageChange" row-key="id" :columns="columns"
        :pagination="pagination" lazyLoad :selected-row-keys="selectedRowKeys" @select-change="rehandleSelectChange">

        <!-- 自定义操作列的单元格 -->
        <template #operation="{ row }">
          <div class="tableBtn">
            <t-button variant="text" theme="primary" @click="accountInfo(row.id)">查看详情</t-button>
            <t-button theme="warning" @click="changeAccount('edit', row.id)">编辑</t-button>
            <t-button theme="success" @click="changeState(row.state, row.id)" v-if="row.state == 0">启用</t-button>
            <t-button theme="success" @click="changeState(row.state, row.id)" v-if="row.state == 1">禁用</t-button>
            <t-button theme="danger" @click="onDel(row.id)">删除</t-button>
          </div>
        </template>
      </t-table>
    </div>

    <t-dialog :visible="stateShow" placement="center" header="确定禁用当前账号吗？" body="确定要禁用当前账号吗？禁用后账号将无法登录操作，请谨慎操作！"
      :onClose="() => delShow = false" :onConfirm="disabledCmit" />

    <t-dialog :visible="delShow" placement="center" header="确定删除当前账号吗？" body="确定要删除当前账号吗？操作删除后账号将被永久删除，操作将无法恢复请谨慎操作！"
      :onClose="() => delShow = false" :onConfirm="delCmit" />
  </div>
</template>

<script>
import QueryInlineForm from '@/components/queryInlineForm.vue';

export default {
  name: '',
  data() {
    return {
      stateShow: false,
      stateId: null,
      delShow: false,
      delId: null,
      selectedRowKeys: [],
      formdata: [
        {
          name: "账号",
          span: 2, //栅格布局24一行
          value: "",
          fromname: "userAccount", //传入后端的名称
          type: "input",
          options: [],
          placeholder: "请输入账号",
          labelWidth: "28",
          disabled: false
        },
        {
          name: "创建时间",
          span: 2, //栅格布局24一行
          value: [],
          fromname: "time", //传入后端的名称
          type: "timer",
          separator: "-",
          labelWidth: "56",
          placeholder: ["开始时间", "结束时间"],
          valueType: "YYYY-MM-DD",
          disabled: false
        },
        {
          type: "button",
          span: 2,
          buttonArray: [
            {
              style: "",
              theme: "default",
              variant: "",
              bottonname: "重置",
              type: "button"
            },
            {
              style: "",
              theme: "primary",
              variant: "",
              bottonname: "搜索",
              type: "button"
            }
          ]
        }
      ],
      tabelData: [
        {
          id: 0,
          userAccount: "zzz",
          hotelName: "fdsjf",
          hotelStar: "fdsjf",
          signType: "dsad",
          auditStatus: "2021-2-1",
          auditPerson: "2024-3-1",
          state: 0
        },
        {
          id: 1,
          userAccount: "zzz",
          hotelName: "fdsjf",
          hotelStar: "fdsjf",
          signType: "dsad",
          auditStatus: "2021-2-1",
          auditPerson: "2024-3-1",
          state: 0
        },
        {
          id: 2,
          userAccount: "zzz",
          hotelName: "fdsjf",
          hotelStar: "fdsjf",
          signType: "dsad",
          auditStatus: "2021-2-1",
          auditPerson: "2024-3-1",
          state: 1
        },
        {
          id: 3,
          userAccount: "zzz",
          hotelName: "fdsjf",
          hotelStar: "fdsjf",
          signType: "dsad",
          auditStatus: "2021-2-1",
          auditPerson: "2024-3-1",
          state: 1
        }
      ],
      pagination: {
        current: 1,
        pageSize: 5,
        total: 4
      },
      columns: [
        {
          colKey: 'row-select',
          type: 'multiple',
          width: 64,
        },
        {
          title: 'ID',
          ellipsis: true,
          colKey: 'id',
        },
        {
          title: '账号',
          ellipsis: true,
          colKey: 'userAccount',
        },
        {
          title: '账号名称',
          ellipsis: true,
          colKey: 'hotelName',
        },
        {
          title: '账号角色',
          ellipsis: true,
          colKey: 'hotelStar',
        },
        {
          title: '授权店铺',
          ellipsis: true,
          colKey: 'signType',
        },
        {
          title: '入驻时间',
          colKey: 'auditStatus',
        },
        {
          title: '通过时间',
          ellipsis: true,
          colKey: 'auditPerson',
        },
        {
          width: 400,
          fixed: 'right',
          colKey: 'operation',
          title: '操作',
        },
      ],
      isLoading: false
    }
  },
  created() {
    //将事件挂载在formdata中
    this.formdata.forEach(element => {
      if (element.type == "button" || element.type == "button2") {
        element.buttonArray.forEach(item => {
          if (item.bottonname == "搜索") {
            item.callback = this.queryClick;
          }
          if (item.bottonname == "重置") {
            item.callback = this.reset;
          }
        });
      }
    });
  },
  components: {
    QueryInlineForm
  },
  methods: {
    queryClick() {
      console.log(this.$refs.queryInlineForm.getValue());
    },
    reset() {
      this.formdata.forEach(item => {
        item.value = "";
      });
    },
    onPageChange(val) {
      this.pagination.current = val.current
      this.pagination.pageSize = val.pageSize
    },
    rehandleSelectChange(value, { selectedRowData }) {
      this.selectedRowKeys = value;
      console.log(value, selectedRowData);
    },
    changeAccount(type, id) {
      this.$router.push(`/system/changeAccount?type=${type}&id=${id}`)
    },
    accountInfo(id) {
      this.$router.push("/system/accountInfo?id=" + id)
    },
    changeState(val, id) {
      if (val) {
        this.stateId = id
        this.stateShow = true
      }
    },
    disabledCmit() {
      this.stateShow = false
    },
    onDel(id) {
      this.delId = id
      this.delShow = true
    },
    delCmit() {
      this.delShow = false
    },
    onOperationRecord() {
      this.$router.push("/system/operationRecord")
    }
  },
}
</script>
<style lang='less' scoped>
.tableBtn {
  ::v-deep .t-button {
    margin-right: 24px;
  }
}
</style>